import {DictDataVO, removeDictData} from "@/services/DictDataService";
import {Button, Popconfirm, Space, Table} from "antd";
import React from "react";
import {ColumnsType} from "antd/es/table";

export interface DictDataProps {
  onSave?: () => void;
  onUpdate?: (record: DictDataVO) => void;
}


const DictData = (props: DictDataProps) => {

  /**
   * 列定义
   */
  const columns: ColumnsType<DictDataVO> = [
    {
      title: "字典编码",
      dataIndex: "id",
    },
    {
      title: "字典排序",
      dataIndex: "sort",
    },
    {
      title: "字典标签",
      dataIndex: "label",
    },
    {
      title: "字典键值",
      dataIndex: "value",
    },
    {
      title: "字典类型",
      dataIndex: "dictType",
    },
    {
      title: "状态（0正常 1停用）",
      dataIndex: "status",
    },
    {
      title: "颜色类型",
      dataIndex: "colorType",
    },
    {
      title: "css 样式",
      dataIndex: "cssClass",
    },
    {
      title: "备注",
      dataIndex: "remark",
    },
    {
      title: '操作', render: (_: any, record: DictDataVO) => [
        <Space key="operate">
          <Button type="link" size="small" onClick={() => props.onUpdate && props.onUpdate(record)}>编辑</Button>
          <Popconfirm
            title="确定要删除吗"
            onConfirm={() => {
              removeDictData(record.id).then()
            }}
            okText="确认"
            cancelText="取消"
          >
            <Button type="link" danger size="small">删除</Button>
          </Popconfirm>
        </Space>
      ],
    }
  ]

  return <>
    <Button key="create" type="primary" onClick={props.onSave}>添加</Button>
    <Table columns={columns}/>
  </>
}

export default DictData
